<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流演示</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
    </script>
    <script src="https://unpkg.com/vue@2.7.4/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.imagesloaded/5.0.0/imagesloaded.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
    </script>
    <!-- <script src="libs/vue.min.js"></script> -->
    <style>
        html,
        body {
            height: 100%;
            /* 设置父元素（<body>）的高度为 100% */
            margin: 0;
            padding: 0;
        }

        div.parent {
            height: 100%;
            width: 70%;
            /* 设置宽度 */
            margin: 0 auto;
            /* 左右自动外边距用于居中 */
            background-color: antiquewhite;
            overflow: auto;
            display: flex;
            justify-content: center;
        }

        div.parent::-webkit-scrollbar {
            /* 滚动条 */
            width: 8px;
        }

        div.parent::-webkit-scrollbar-track {
            /* 滚动条导轨 */
            background-color: bisque;
        }

        div.parent::-webkit-scrollbar-thumb {
            /* 滚动条滑块 */
            background-color: pink;
            border-radius: 6px;
        }

        div.wall {
            height: 100%;
        }

        div.wall-item {
            /* 固定宽度 240px */
            width: 240px;
            /* 上下间距 */
            margin-bottom: 10px;
        }

        .wall-item .container {
            width: 100%;
            height: 100%;
            /* 弹性布局*/
            display: flex;
        }

        .wall-item .container .img-box {
            /* 利用弹性布局撑开容器 */
            flex: 1;
            width: 100%;
        }

        .wall-item .container .img-box::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, #222, transparent);
            z-index: 1;
            opacity: 0;
            transition: 0.5s;
        }

        .wall-item .container:hover .img-box::before {
            opacity: 1;
        }

        /* 加载动画 */
        .wall-item .container .img-box .is-loading {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            background-color: gainsboro;
            background-image: url('https://cdn.jsdelivr.net/gh/SamHerbert/SVG-Loaders/svg-loaders/puff.svg');
            background-position: center center;
            background-repeat: no-repeat;
        }

        .wall-item .container .img-box .illust {
            width: 100%;
            transition: opacity 0.4s;
        }

        .wall-item .container .img-box .illust-loading {
            opacity: 0;
        }

        .wall-item .container .desc-box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-end;
            color: white;
            z-index: 2;
            line-height: 36px;
            overflow: hidden;
        }

        .wall-item .container .desc-box>div {
            margin-left: 6px;
            margin-bottom: 10px;
            transform: translateY(200px);
            transition: 0.5s;
        }

        .wall-item .container:hover .desc-box>div {
            transform: translateY(0);
            transition-delay: 0.3s;
        }

        .wall-item .container .desc-box img {
            width: 36px;
            height: 36px;
            border-radius: 36px;
            vertical-align: middle;
        }

        .wall-item .container .desc-box p {
            margin: 0;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>

<body>
<div class="parent" id="app">
    <div class="wall">
        <div class="wall-item" v-for="pic in picList">
            <div class="container">
                <div class="img-box">
<!--                    <div class="is-loading" style="height: 167.78px"></div>-->
                    <a :href="pic.fullPath" data-fancybox="画廊" :data-caption="pic.title">
                        <img class="illust" :src="pic.fullPath" alt=""/>
                    </a>
                </div>
                <div class="desc-box">
                    <div>
                        <img src="avatar.png" alt="avatar" width="36px" height="36px">
                        <p>Bob Zen</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/index.js"></script>
</body>

</html>